<template>
  <div
    class="h-full"
    :class="{ 'theme-light': theme == 'light', 'theme-dark': theme == 'dark' }"
  >
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'

let { $store, $storeToRefs, $route, $util } = window

// theme主题
const { theme } = $storeToRefs($store)
const themeChange = ({ value }: { value?: any }) => {
  if (!value) return

  const doc = document.getElementsByTagName('html')[0]

  if (value == 'dark') return doc.classList.add('dark')

  doc.classList.remove('dark')
}
watch(
  () => theme.value,
  (N) => {
    themeChange({ value: N })
  },
  { immediate: true },
)
watch(
  () => $route.value.query.theme,
  (N) => {
    if (!N) return
    themeChange({ value: N })
    theme.value = N
  },
  { immediate: true },
)
$util.iframe.getMessage({
  Fun: (e: any) => {
    let { code, data } = e
    if (code !== 'theme') return
    theme.value = data
  },
})
</script>

<style scoped></style>
